<!DOCTYPE html>
<html lang="en">
<!-- 1158766736@qq.com -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../element/index.css">
    <!-- 引入组件库 -->
    <script src="../element/index.js"></script>
    <title>用户管理系统</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .formstyle {
            display: none;
        }
        
        .formstyle-edit {
            display: none;
        }
    </style>
</head>

<body>
    <div id="government">
        <h2>用户信息列表</h2>
        <el-button type="info">信息按钮</el-button>

        <table border="1" cellpadding="0" cellspacing="0" width="800px">
            <thead>
                <tr><button type="button" v-on:click="aaa">添加联系人</button></tr>
                <tr>
                    <th v-for="item in list">{{item}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in tableData">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.selectedAddress}}</td>
                    <td>{{item.qq}}</td>
                    <td>{{item.Email}}</td>
                    <td>
                        <button v-on:click="edit(item,index)">编辑</button>
                        <button v-on:click="delete_line(item,index)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div v-bind:class="{formstyle:istrue}">
            <form>
                <h2>添加联系人页面</h2>
                <div>
                    <label>姓名：</label>
                    <input type="text" placeholder="请输入姓名" v-model="formData.name">
                    <p>输出：{{formData.name}}</p>
                </div>
                <div>
                    <label>性别：</label>
                    <input type="radio" name="sex" v-model="formData.sex" value="男" id="sex-1"><label for="sex-1">男</label>
                    <input type="radio" name="sex" v-model="formData.sex" value="女" id="sex-2"> <label for="sex-2">女</label>
                    <p>输出：{{formData.sex}}</p>
                </div>
                <div>
                    <label>年龄：</label>
                    <input type="number" placeholder="请输入年龄" v-model="formData.age">
                    <p>输出：{{formData.age}}</p>
                </div>
                <div>
                    <label>籍贯：</label>
                    <select v-model="formData.selectedAddress">
                        <option selected="selected" disabled>请选择</option>
                        <option v-for="item in Address">{{item}}</option>
                    </select>
                    <p>输出：{{formData.selectedAddress}}</p>
                </div>
                <div>
                    <label>QQ：</label>
                    <input type="number" v-model="formData.qq" placeholder="请输入QQ号码">
                    <p>输出：{{formData.qq}}</p>
                </div>
                <div>
                    <label>Email：</label>
                    <input type="email" placeholder="请输入邮箱地址" v-model="formData.Email">
                    <p>输出：{{formData.Email}}</p>
                </div>
                <div>
                    <button type="button" v-on:click="subMit">提交</button>
                    <button type="reset">重置</button>
                    <button type="button">返回</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        var g = new Vue({
            el: '#government',
            data: {
                list: ['编号', '姓名', '性别', '年龄', '籍贯', 'QQ', '邮箱', '操作'],
                Address: ['广东', '安徽', '湖北', '北京', '上海'],
                tableData: [],
                formData: {
                    name: '',
                    sex: '',
                    age: null,
                    selectedAddress: [],
                    qq: '',
                    Email: '',
                },

                istrue: true,
                count: 0,
                bnt_num: 0
            },
            methods: {
                aaa: function() {
                    this.istrue = !this.istrue
                    this.count = 0;
                },
                subMit: function() {
                    if (this.count == 0) {
                        this.tableData.push({...this.formData
                            })
                            // this.tableData.push({
                            //     name: this.name,
                            //     sex: this.sex,
                            //     age: this.age,
                            //     selectedAddress: this.selectedAddress,
                            //     qq: this.qq,
                            //     Email: this.Email,

                        // });

                        // this.istrue = !this.istrue;
                        // this.name = '';
                        // this.sex = '';
                        // this.age = null;
                        // this.selectedAddress = '';
                        // this.qq = '';
                        // this.Email = ''
                        // this.tableData = this.tableData.concat([])
                    } else {
                        // this.length = this.tableData.length;
                        this.tableData[this.bnt_num] = {...this.formData
                        };
                        // this.tableData[this.bnt_num].name = this.formData.name;
                        // this.tableData[this.bnt_num].sex = this.formData.sex;
                        // this.tableData[this.bnt_num].age = this.formData.age;
                        // this.tableData[this.bnt_num].selectedAddress = this.formData.selectedAddress;
                        // this.tableData[this.bnt_num].qq = this.formData.qq;
                        // this.tableData[this.bnt_num].Email = this.formData.Email;
                    }
                    this.istrue = !this.istrue;
                    this.formData = {

                        name: '',
                        sex: '',
                        age: null,
                        selectedAddress: '',
                        qq: '',
                        Email: ''
                    }


                },
                edit: function(item, index) {
                    this.istrue = !this.istrue;
                    this.formData = {...item
                    };
                    // let {name,sex}={...this.formData};
                    // name
                    // this.name = item.name;   
                    // this.sex = item.sex;
                    // this.age = item.age;
                    // this.selectedAddress = item.selectedAddress;
                    // this.qq = item.qq;
                    // this.Email = item.Email;
                    this.count++;
                    this.bnt_num = index
                },
                delete_line: function(item, index) {

                }
            }
        })
    </script>
</body>

</html>